import useTable from '@/hooks/useTable'
import { defineComponent } from 'vue'
import MsTable from '@/components/Tables'
import RoleForm, { IRoleEntity } from './RoleForm'

export default defineComponent({
  name: 'RoleTable',
  setup(props, { emit }) {
    const { msTable, tableData: state } = useTable()
    const tableConf = {
      columns: [
        { dataIndex: 'name', title: '角色名称' },
        { dataIndex: 'perimission', title: '权限标识' },
        { dataIndex: 'createTime', title: '创建时间' },
        { title: '操作', slots: { customRender: 'action' } }
      ],
      api: '/sys/role/list'
    }

    const tableSlots = {
      action: ({ record }: { record: IRoleEntity }) => (
        <>
          { record.perimission !== 'admin' && (
            <>
              <a onClick={() => { (state.currentId as string | undefined) = record.roleId; state.dialogVisible = true }}>修改</a>
              <a-divider type="vertical" />
              <a onClick={() => { emit('update:roleId', record.roleId) }}>配置</a>
            </>
          )
          }
        </>
      )
    }

    return () => {
      return (
        <a-card title="角色表" bordered={false}>
          <MsTable ref={msTable} columns={tableConf.columns} api={tableConf.api} rowKey="roleId" v-slots={tableSlots} />
          <RoleForm v-model={[state.dialogVisible, 'visible']} formId={state.currentId} />
        </a-card>
      )
    }
  }
})
